<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
window.onload=function(){
   



 function clock(){
    var canvas=document.getElementById("canvas");
    var cx=canvas.getContext("2d");
    cx.fillStyle="green";
    cx.strokeStyle="orange"
    cx.beginPath();
    cx.arc(300,300,130,0,Math.PI*2)
    cx.closePath();
    cx.fill();
    //绘制时刻度
    cx.strokeStyle="black";
   
    
    for(var i=0;i<12;i++){
        cx.save();
        cx.lineWidth=3;
        cx.translate(300,300);
        cx.rotate((i+1)*Math.PI/6);
        
        cx.beginPath();
        cx.moveTo(0,-115);
        cx.lineTo(0,-130);
        cx.closePath();       
        cx.stroke();

        
        
        cx.font="16px blod";
        cx.fillStyle="black";
        
        cx.fillText(i+1,0,-150);
        cx.fill()
       
        cx.restore()


        
       
    }
    //绘制分刻度
     cx.lineWidth=2
    for(var i=0;i<60;i++){
        cx.save();
        cx.translate(300,300);
        cx.rotate(i*Math.PI/30)
        cx.beginPath();
        cx.moveTo(0,-122);
        cx.lineTo(0,-130);
        cx.closePath();       
        cx.stroke();
        cx.restore()

        
    }

    //绘制时针
    var today=new Date();
    var hour=today.getHours();
    var min=today.getMinutes();
    var sec=today.getSeconds();
    
    hour=hour+min/60;
    cx.lineWidth=5;
    cx.save();
    
    cx.translate(300,300);
    cx.rotate(hour*Math.PI/6);
    cx.beginPath();
    cx.moveTo(0,8);
    cx.lineTo(0,-70);
    cx.closePath();
    cx.stroke();
    cx.restore();
    //绘制分针
   cx.save();
   cx.lineWidth=3
   cx.strokeStyle="black";
   cx.translate(300,300);
   cx.rotate(min*Math.PI/30);
   cx.beginPath();
   cx.moveTo(0,8);
   cx.lineTo(0,-90);
   cx.closePath()
   cx.stroke()
   cx.restore()
  //绘制秒针
  cx.save();
  cx.lineWidth=1;
  cx.strokeStyle="red";
  
  cx.translate(300,300);
  cx.rotate(sec*Math.PI/30);
  cx.beginPath();
  cx.moveTo(0,12);
  cx.lineTo(0,-110);
  cx.closePath()
  cx.stroke()
  cx.restore();
    
//绘制交界处
 cx.save();
 cx.lineWidth=1;
 cx.fillStyle="#ccc";
 cx.strokeStyle="red"
 cx.translate(300,300);
 cx.beginPath();
 cx.arc(0,0,5,0,Math.PI*2)
 cx.closePath();
 cx.fill();
 cx.stroke()
 cx.restore();

  setTimeout(clock,1000)
 }
clock();
}


    </script>
</head>
<body>
    <canvas id="canvas" width="600px" height="600px" style="background-color: rgb(168, 161, 175);"></canvas>
</body>
</html>